<template>
  <a-modal class="common-modal" :title="title" :footer="null" :width="550" :scroll="{ y: 580 }" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel" :maskClosable="false" style="top:5%;">
    <a-spin :spinning="loading">
      <div style="height: 580px; overflow-y: scroll;">
        <header class="edit-other-header">
          <div >序号</div>
          <div ><span>时段</span></div>
          <div >
            <a-checkbox v-model:checked="checkedAllStart" @change="onCheckedAllStart"> 是否显示</a-checkbox>
            <!--<a-button size="small" type="primary" ghost   @click="onCheckedAllStart">是否显示</a-button>-->
          </div>
        </header>
        <div class="edit-other-contents" v-for="(item,index) in hourList" :key="index">
          <div> <span>{{ index+1 }}</span> </div>
          <div> <span>{{ item.label }}</span> </div>
          <div >
            <a-checkbox v-model:checked="item.checked" ></a-checkbox>
          </div>
        </div>
      </div>
      <div class="common-modal-footer">
        <a-button @click="handleCancel" class="cancel">取消</a-button>
        <a-button @click="handleOk" type="primary" class="confirm">确定</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>
<script setup>
import {  nextTick, ref } from 'vue'
import { getLocalStorage } from "@/utils";
import {  hourArr } from "./config.js"

const emits = defineEmits(['ok'])
// import { message } from 'ant-design-vue'
// import { pick } from 'lodash'
// import { otherColumns } from './prodTimeConfig'
// import { store } from '@/store'
// import {message} from "ant-design-vue";
let title = ref('')
let visible = ref(false)
let confirmLoading = ref(false)
let loading = ref(false)
let checkedAllStart= ref(false)
let hourList = ref([])
// 全选
const onCheckedAllStart = async () => {
  hourList && hourList.value.forEach(item=>{
    item.checked = checkedAllStart.value
  })
}
const open = async () => {
  await initModal()
  await nextTick()
  hourList.value =  getLocalStorage("hourList") ? getLocalStorage("hourList") : hourArr
}
const handleOk = async () => {
  localStorage.setItem("hourList", JSON.stringify(hourList.value));
  emits('ok',hourList.value)
  visible.value = false
}
const initModal = async () => {
  title.value = '选择时段'
  visible.value = true
  checkedAllStart.value = false
}
const handleCancel = () => {
  visible.value = false
}
defineExpose({
  open
})
</script>